<template>
	<view class="view-content-my-box"
		:style="{ paddingTop: `${navBarHeight}px`,height: `calc(100vh - ${navBarHeight}px - ${tabbarHeight}px)` }">
		<slot></slot>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	const props = defineProps({
		isTabbar: {
			type: Boolean,
			default: false
		}
	});
	// 定义导航栏高度的响应式变量
	const navBarHeight = ref(0);
	// 获取底部导航栏高度
	const tabbarHeight = ref(0);
	// 页面挂载时获取系统信息并计算导航栏高度
	onMounted(() => {
		console.log(props.isTabbar,props,'isTabbarisTabbarisTabbar');
		const systemInfo = uni.getSystemInfoSync();
		const statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
		// 根据平台计算导航栏高度
		if (systemInfo.platform === 'android') {
			// Android 导航栏高度
			navBarHeight.value = statusBarHeight + 48
			if (props.isTabbar) {
				tabbarHeight.value = systemInfo.windowBottom ? systemInfo.windowBottom : 0
			} else {
				tabbarHeight.value = 0
			}
		} else {
			// iOS 导航栏高度
			navBarHeight.value = statusBarHeight + 44
			if (props.isTabbar) {
				tabbarHeight.value = systemInfo.windowBottom ? systemInfo.windowBottom : 0
			} else {
				tabbarHeight.value = 0
			}
		}
	});
</script>

<style lang="scss" scoped>
	.view-content-my-box {
		width: 100%;
		overflow-y: auto;
	}
</style>